<template>
    <div>
        <index-header></index-header>
        <div class="big-box">
            <h1 style="text-align:left;">{{ datatype }}</h1>
            <div style="width:1100px;height:1030px;margin-bottom: 20px;;">
                <div v-for="item in moreList" :key="item.bookId" class="items">
                    <div style="width:176px;height:244px;">
                        <img style="width:176px;height:244px;" :src="item.bookpic" />
                    </div>
                    <div style="width:176px;height:26px;">
                        <p class="hidden-text">
                            {{ item.bookname }}
                        </p>
                    </div>
                    <div style="width:176px;background:white;margin-top:4px;">
                        <p style="line-height:0;padding-right:5px;"><span class="price">￥{{ item.price }}</span>
                            <a class="detail" @click="detail(item.bookId)">商品详情</a>
                        </p>
                    </div>
                </div>

            </div>
          

        </div>

    </div>

</template>

<script>
import { toRefs, reactive } from '@vue/reactivity'
import { useRoute, useRouter } from "vue-router"
import { bookShowMoreApi } from "../utils/clientApi"
import indexHeader from './indexHeader.vue'
export default {
    components: { indexHeader },
    name: "showMore",
    setup() {
        const route = useRoute()
        const router = useRouter()
        const data = reactive({
            param: "",
            moreList: "",
            datatype: "",
        })
        const getMoreList = () => {
            data.param = route.params.id
            bookShowMoreApi(data.param).then(res => {
                data.moreList = res.data
                data.datatype = res.msg
                console.log(res);
            })

        }
        getMoreList()
        //   详情页
        const detail = (bookId) => {
            router.push({
                path: "/goodsdetail",
                query: { bookId: bookId }
            })
        }
        return {
            ...toRefs(data),
            getMoreList, detail
        }
    }
}
</script>

<style scoped>


.big-box {
    width: 1100px;
    margin: 0 auto;
    height: auto;

}

.items {
    float: left;
    width: 16%;
    height: 310px;
    margin-left: 40px;
    margin-top: 20px;
    margin-bottom: 15px;
    box-shadow: 0px 1px 2px 0px rgb(200, 200, 200);

}

.hidden-text {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    /*禁止换行显示*/
    white-space: nowrap;
    font-size: 16px;
    float: left;
    margin: 3px 0 0 5px;
}

.price {
    position: relative;
    left: -64px;
    font-size: 18px;
    color: red;
    margin: 3px 0 0 5px;
    line-height: 0;
}

.detail {
    line-height: 0px;
    float: right;
    color: #0098f7;
    font-size: 12px;
}

a:hover {
    cursor: pointer;
}
</style>